<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <el-form
      @submit.native.prevent
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="70px"
    >
      <el-form-item label="订单编号" prop="orderNo">
        <el-input
          v-input-restrict
          v-model="queryParams.orderNo"
          placeholder="请输入订单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="门店" prop="schoolId">
        <el-select v-model="queryParams.schoolId" filterable placeholder="门店">
          <el-option label="全部" :value="undefined" />
          <el-option
            v-if="dict.tagId > 1"
            v-for="dict in schools"
            :key="dict.schoolId"
            :label="dict.schoolName"
            :value="dict.schoolId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建人" prop="createByName">
        <el-input
          v-input-restrict
          v-model="queryParams.createByName"
          placeholder="请输入创建人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime" v-show="showSearch">
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="queryParams.createTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="$pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="生效时间" prop="startDate" v-show="showSearch">
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="queryParams.startDate"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="$pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="有效期至" prop="endDate" v-show="showSearch">
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="queryParams.endDate"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="$pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          v-preventReClick
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button
          v-preventReClick
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 搜索按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-preventReClick
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <!-- 表格 -->
    <el-table v-loading="loading" :data="postList">
      <el-table-column
        label="订单编号"
        show-overflow-tooltip
        align="center"
        prop="orderNo"
      />
      <el-table-column
        label="门店"
        show-overflow-tooltip
        align="center"
        prop="schoolNames"
      />
      <el-table-column
        label="课程名称"
        show-overflow-tooltip
        align="center"
        prop="courseNames"
      />
      <el-table-column
        label="订单金额(元)"
        show-overflow-tooltip
        align="center"
        prop="amount"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.amount ? formatAmount(scope.row.amount) : "--" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="创建人"
        show-overflow-tooltip
        align="center"
        prop="createByName"
      />

      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="150"
      >
      </el-table-column>
      <el-table-column
        width="100"
        label="生效时间"
        align="center"
        prop="startDate"
      >
      </el-table-column>
      <el-table-column
        label="有效期至"
        align="center"
        prop="endDate"
        width="100"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改岗位对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
    >
      <el-form
        @submit.native.prevent
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="门店" prop="schoolIds">
          <el-select
            style="width: 95%"
            v-model="form.schoolIds"
            placeholder="请选择门店"
            clearable
            filterable
            multiple
          >
            <el-option
              v-if="dict.tagId > 1"
              v-for="dict in schools"
              :key="dict.schoolId"
              :label="dict.schoolName"
              :value="dict.schoolId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="课程" prop="courseIds">
          <el-select
            style="width: 95%"
            v-model="form.courseIds"
            placeholder="请选择课程"
            clearable
            filterable
            multiple
          >
            <el-option
              v-for="dict in courses"
              :key="dict.courseId"
              :label="dict.courseName"
              :value="dict.courseId"
            />
          </el-select>
        </el-form-item>
        <!-- 生效时间 -->
        <el-form-item label="生效时间" prop="startDate">
          <el-date-picker
            style="width: 95%"
            :picker-options="pickerOptionsStart"
            value-format="yyyy-MM-dd"
            v-model="form.startDate"
            type="date"
            placeholder="请选择生效时间"
            clearable
          />
        </el-form-item>
        <!-- 失效时间 -->
        <el-form-item label="有效期至" prop="endDate">
          <el-date-picker
            style="width: 95%"
            :picker-options="pickerOptionsEnd"
            value-format="yyyy-MM-dd"
            v-model="form.endDate"
            type="date"
            placeholder="请选择有效期至"
            clearable
          />
        </el-form-item>
        <!-- 订单金额 -->
        <el-form-item label="订单金额" prop="amount">
          <!-- el-input浮点校验 -->
          <el-input-number
            v-model="form.amount"
            :min="0"
            :step="1"
            :precision="2"
            controls-position="right"
            placeholder="请输入"
          />
          元
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-input-restrict
            style="width: 95%"
            v-model="form.remark"
            type="textarea"
            placeholder="请输入备注"
            maxlength="500"
            show-word-limit
            :autosize="{ minRows: 5, maxRows: 8 }"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-preventReClick @click="cancel">取 消</el-button>
        <el-button v-preventReClick type="primary" @click="submitForm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import {
  listPost_order,
  getPost_order,
  delPost_order,
  addPost_order,
  updatePost_order,
} from "@/api/order/order";
import { listPost_course, getMineSchoolIds } from "@/api/course/course";
import { listPost_school } from "@/api/school/list";
export default {
  name: "Post",
  dicts: ["sys_normal_disable"],
  data() {
    return {
      pickerOptionsStart: {
        // 时间只能大于startTime
        disabledDate: (time) => {
          const currentTime = new Date(); // 获取当前时间
          if (!this.form.endDate) {
            return time.getTime() < currentTime.getTime() - 84600000;
          }
          return (
            time.getTime() > new Date(this.form.endDate).getTime() ||
            time.getTime() < currentTime.getTime() - 84600000
          );
        },
      },
      pickerOptionsEnd: {
        // 时间只能小于startTime
        disabledDate: (time) => {
          if (!this.form.startDate) {
            return;
          }
          return (
            time.getTime() < new Date(this.form.startDate).getTime() - 84600000
          );
        },
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        schoolId: undefined,
        orderNo: undefined,
        createByName: undefined,
        remark: undefined,
        startDate: undefined,

        endDate: undefined,

        createTime: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        amount: [
          { required: false, message: "订单金额不能为空", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value > 99999999.99) {
                callback(new Error("订单金额不能超过99999999.99"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        schoolIds: [
          { required: true, message: "门店不能为空", trigger: "blur" },
        ],
        courseIds: [
          { required: true, message: "课程不能为空", trigger: "blur" },
        ],
        startDate: [
          { required: true, message: "生效时间不能为空", trigger: "blur" },
        ],
        endDate: [
          { required: true, message: "有效期至不能为空", trigger: "blur" },
        ],
      },
      //   学校列表
      schools: [],
      //   课程列表
      courses: [],
    };
  },
  created() {
    this.getList();
    // 获取学校列表
    this.getSchoolList();
    // 获取课程列表
    this.getCourseList();
  },
  methods: {
    formatAmount(amount) {
      // 检查金额是否为数字
      if (isNaN(amount)) {
        return amount;
      }

      // 将金额转换为字符串，并根据千位分隔符将其格式化
      return (amount + "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    checkAmount(e) {
      if (this.form.amount > 100000000) {
        this.form.amount = 99999999.99; // 如果输入金额超过1亿，则将其设置为1亿
      }
    },
    /* 获取课程列表 */
    getCourseList() {
      listPost_course({
        pageSize: 10000,
        pageNum: 1,
        status: 0,
      }).then((res) => {
        this.courses = res.rows;
      });
    },
    /* 获取学校列表 */
    getSchoolList() {
      listPost_school({
        pageSize: 10000,
        pageNum: 1,
        status: 0,
      }).then((res) => {
        this.schools = res.rows;
      });
    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      let data = { ...this.queryParams };
      data.beforeStartDate = data.startDate ? data.startDate[0] : "";
      data.afterStartDate = data.startDate ? data.startDate[1] : "";
      data.beforeEndDate = data.endDate ? data.endDate[0] : "";
      data.afterEndDate = data.endDate ? data.endDate[1] : "";
      data.beforeCreateTime = data.createTime ? data.createTime[0] : "";
      data.afterCreateTime = data.createTime ? data.createTime[1] : "";
      delete data.startDate;
      delete data.endDate;
      delete data.createTime;
      listPost_order(data).then((response) => {
        this.postList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /* 详情 */
    handleDetail(row) {
      // 跳转到详情页
      this.$router.push({
        path: "/order/orderDetail",
        query: {
          id: row.orderId,
        },
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        amount: undefined,
        startDate: undefined,
        endDate: undefined,
        schoolIds: [],
        courseIds: [],
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加订单";
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addPost_order(this.form).then((response) => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const postIds = row.postId || this.ids;
      this.$confirm(
        `确认删除【${row.postName}】吗？删除后不可恢复`,
        `删除确认`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delPost(postIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/post/export",
        {
          ...this.queryParams,
        },
        `post_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
  